<template>
  <div>
    <div>
      <div class="main-body">
        <div class="main-content">
          <div>
            <Crumbs></Crumbs>
          </div>
          <div class="change_success uploadsuccess">
            <div>
              <div class="upload_li">
                <span>标题：</span>
                <input type="text" placeholder="请输入帖子标题" v-model="info.title"/>
              </div>
              <div class="upload_li">
                <span>帖子内容：</span>
                <div class="components-container">
                  <div class="editor-container">
                    <UE :defaultMsg=info.property :config=config1 ref="ue1" :id="ue1"></UE>
                  </div>
                </div>
              </div>
            </div>
            <div class="btn" @click="submit">
              提交
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import UE from '../Ueditor.vue'
  import 'iview/dist/styles/iview.css'
  import { mapState } from 'vuex'
  import Crumbs from '../Crumbs'
  export default {
    name: 'revehicle',
    components: {
      'Crumbs': Crumbs,
      UE
    },
    data () {
      return {
        info: {
          title: '',
          link: '',
          image: '../../static/image/ac_7.png',
          ca_id: '',
          property: '',
          safety: '',
          oil: '',
          synthesize: '',
          label: [],
          service: ''
        },
        config1: {
          initialFrameWidth: null,
          initialFrameHeight: 330
        },
        ue1: 'ue1',
        type: '',
        id: '',
        recreationId: -1,
        originId: -1,
        entertainId: -1,
        label: ''
      }
    },
    computed: mapState({
      crumbs: state => state.crumbs
    }),
    methods: {
      submit: function () {
        let that = this
        let title = that.info.title
        let content = that.$refs.ue1.getUEContent()
        let type = that.type
        let id = that.id
        let data = {
          title: title,
          content: content,
          type: type
        }
        if (type === '主题') {
          data.theme_id = id
        }
        if (type === '品牌') {
          data.car_pid = id
        }
        if (type === '车系') {
          data.car_id = id
          if (that.originId !== -1) {
            data.originId = that.originId
          } else if (that.entertainId !== -1) {
            data.entertainId = that.entertainId
          }
        }
        if (type === '地区') {
          data.region_id = id
          data.label = that.label
        }
        if (title === '') {
          that.$vux.toast.show({
            text: '请输入标题',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (content === '') {
          that.$vux.toast.show({
            text: '请输入内容',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        that.$chaos.ajax({
          url: '/Forum/addForumThemePost',
          data: data,
          userinfo: true,
          callback: function (type, res) {
            if (type === 'success') {
              that.$vux.toast.show({
                text: '发帖成功,请耐心等待工作人员审核',
                width: '200px',
                position: 'middle',
                type: 'text'
              })
              // that.info.title = ''
              setTimeout(function () {
                that.$router.push(that.link)
              }, 2000)
            }
          }
        })
      },
      verify: function () {
        let that = this
        that.id = decodeURI(that.$chaos.getQueryString('theme_id'))
        let type = decodeURI(that.$chaos.getQueryString('type'))
        if (decodeURI(that.$chaos.getQueryString('label'))) {
          that.label = decodeURI(that.$chaos.getQueryString('label'))
        }
        if (decodeURI(that.$chaos.getQueryString('entertainId'))) {
          that.entertainId = decodeURI(that.$chaos.getQueryString('entertainId'))
        }
        if (decodeURI(that.$chaos.getQueryString('originId'))) {
          that.originId = decodeURI(that.$chaos.getQueryString('originId'))
        }
        that.type = type
        let link = ''
        if (type === '主题') {
          link = '/Forums/Theme'
        } else if (type === '地区') {
          link = '/Forums/Area'
        } else if (type === '品牌') {
          link = '/Forums/Brand'
        } else if (type === '车系') {
          link = '/Forums/CarsClub'
        }
        that.link = link
        let crumbs = [{
          title: type + '论坛',
          link: link
        }, {
          title: '上传帖子',
          link: ''
        }]
        this.$store.commit('crumbs', crumbs)
      }
    },
    created: function () {
      let that = this
      that.verify()
    }
  }
</script>
<style>
  .edui-default .edui-editor-bottomContainer table{
    display: none!important;
  }
  .ivu-dropdown-menu{
    min-width: 100px;
    height: 280px;
    background: #fff;
    overflow: auto;
  }
  .ivu-dropdown{
    margin-left: 38px;
  }
  .editor-container{
    width: 985px;
    margin-left: 162px;
  }
  .main-title span{
    font-size: 18px;
  }
  .ivu-dropdown-rel a{
    font-size: 17px;
    background: #fff;
    padding: 10px 15px;
    border-radius: 5px 5px;
    color: #000;
  }
  .ivu-icon-ios-arrow-down:before{
    color: #000;
  }
  .btn_back,.btn_can{
    cursor: pointer;
  }
  .upload_li img{
    width: 154px!important;
    height: 154px!important;
    padding: 0px!important;
    border: 0px!important;
  }
  .upload_kl{
    position: relative;
    height:145px;
  }
  .upload_kl>img{
    position: absolute;
    z-index:2;
  }
  .upload_kl>input{
    padding: 0px!important;
    width: 154px;
    height: 154px!important;
    position: absolute;
    z-index:3;
    opacity: 0;
  }
  .btn {
    background: url(../../../static/image/t_1.png);
    background-size: cover;
    width: 300px;
    height: 45px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 45px;
    margin: 74px auto 30px;
    box-shadow: 3px 3px 5px #489cfa;
    display: inherit;
    cursor: pointer;
  }
  *{
    font-family: '微软雅黑';
  }
  .upload_li_tab{
    width: calc(100% - 215px);
    margin-left: 145px;
    overflow: hidden;
  }
  .upload_li_tab li{
    padding: 0px 10px;
    border:1px solid #989898;
    color: #989898;
    text-align: center;
    line-height: 27px;
    float: left;
    cursor: pointer;
    margin-left:15px;
    margin-top:8px;
  }
  .upload_li_tab li.active{
    border:1px solid #4268e5;
    color: #4268e5;
  }
  .main-title span{
    cursor: pointer;
  }
  .blue_r{
    color: #528df5;
  }
</style>
<style scoped>
  .upload_li>span{
    color: #26298a;
    font-weight: 700;
    line-height: 44px;
  }
  .upload_li>input{
    height: 50px;
    padding: 0px 10px!important;
    font-size: 18px;
  }
  .change_center{
    margin-top: 40px;
  }
  .main-body {
    background: url(../../../static/image/o_15.png) center top no-repeat;
    padding: 20px 0 50px;
  }
  .main-content {
    width: 1300px;
    margin: 0 auto;
  }
  .right {
    float: right;
  }
  .main-title .crumbs-icon{
    display: inline-block;
    width: 15px;
    height:15px;
    background-image: url("../../../static/image/hierarchy-icon.png");
    background-size: 100% 100%;
    transform: translateY(2px);
    margin: 0 5px;
  }
  .main-title .current-position{
    color: #47A7FE;
  }
  .car-name{
    padding-top: 20px;
    font-size: 24px;
  }
</style>
